<!--
 * Description: FD 历史版本组件
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/10 16:34
-->

<template>
  <div class="fd-history" style="margin-top: 10px">
    <!--报价FD数据表格-->
    <el-table :data="formData" :header-cell-style="headerClass" height="100%">
      <!--序号列-->
      <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <!-- 默认内容 -->

      <!--FD编号列-->
      <el-table-column
        align="center"
        :label="$t('FdData.fdId')"
        min-width="130px"
        prop="fdId"
        sortable
      />

      <!--FD版本列-->
      <el-table-column
        align="center"
        :label="$t('FdData.version')"
        min-width="100px"
        prop="version"
        sortable
      />

      <!--FD名称列-->
      <el-table-column
        align="center"
        :label="$t('FdData.fdName')"
        min-width="150px"
        prop="fdName"
        sortable
      />

      <!--bu类型列-->
      <el-table-column
        align="center"
        :label="$t('FdData.bu')"
        min-width="100px"
        prop="bu"
        sortable
      />

      <!--Temp Model-->
      <el-table-column
        align="center"
        label="Temp Model Number"
        min-width="220px"
        prop="tempModelNumber"
        show-overflow-tooltip
        sortable
      />

      <!-- FD状态 -->
      <el-table-column align="center" :label="$t('FdData.fdStatus')" min-width="120px">
        <template slot-scope="scope">
          <span v-if="scope.row.fdStatus === 10" class="tag-blue">
            {{ $fdStatus({ code: scope.row.fdStatus }) }}
          </span>
          <span v-else class="tag-darkBlue">
            {{ $fdStatus({ code: scope.row.fdStatus }) }}
          </span>
        </template>
      </el-table-column>

      <!--FD报价期限列-->
      <el-table-column
        align="center"
        :label="$t('FdData.expiresDay')"
        min-width="120px"
        prop="expiresDay"
        sortable
      />

      <!--创建人列-->
      <el-table-column
        align="center"
        :label="$t('FdData.createUser')"
        min-width="150px"
        prop="createUser"
        sortable
      >
        <template slot-scope="scope">
          <span>
            {{ $store.getters['user/getUserNameById'](scope.row.createUser) || $t('result.none') }}
          </span>
        </template>
      </el-table-column>

      <!--创建时间列-->
      <el-table-column
        align="center"
        :label="$t('FdData.createTime')"
        min-width="180px"
        prop="createTime"
        sortable
      />

      <!--专案PBM负责人列-->
      <el-table-column align="center" :label="$t('FdData.pbmOwner')" min-width="120px">
        <template slot-scope="scope">
          <span>
            {{ $store.getters['user/getUserNameById'](scope.row.pbmOwner) || $t('result.none') }}
          </span>
        </template>
      </el-table-column>

      <!--专案ME负责人列-->
      <el-table-column align="center" :label="$t('FdData.meOwner')" min-width="120px">
        <template slot-scope="scope">
          <span>
            {{ $store.getters['user/getUserNameById'](scope.row.meOwner) || $t('result.none') }}
          </span>
        </template>
      </el-table-column>

      <!--专案EE负责人列-->
      <el-table-column align="center" :label="$t('FdData.eeOwner')" min-width="120px">
        <template slot-scope="scope">
          <span>
            {{ $store.getters['user/getUserNameById'](scope.row.eeOwner) || $t('result.none') }}
          </span>
        </template>
      </el-table-column>

      <!--专案PKG负责人列-->
      <el-table-column align="center" :label="$t('FdData.pkgOwner')" min-width="120px">
        <template slot-scope="scope">
          <span>
            {{ $store.getters['user/getUserNameById'](scope.row.pkgOwner) || $t('result.none') }}
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { fdList } from '@/api/serverbom/fd'
export default {
  name: 'ServerHistory',
  props: {
    inputData: {
      default: () => null,
      type: Object
    }
  },
  data() {
    return {
      formData: []
    }
  },
  mounted() {
    this.pageDataInit()
  },
  methods: {
    async pageDataInit() {
      try {
        const res = await fdList({ fdId: this.inputData.fdId })
        this.formData = res.data
      } catch (error) {
        console.log(error)
      }
    },
    headerClass() {
      return 'background: #e4e4e4 !important;padding:5px 0px;'
    }
  }
}
</script>
<style>
.fd-history {
  position: fixed;
  top: 68px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding: 10px 25px 16px 20px;
}
</style>
